<!--地图框选的设备列表 -->
<template>
  <div id="selected-devices" >
    <List>
      <ListItem v-for="(item,index) in devices" :key="index">
        <ListItemMeta avatar="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar"
                      :title="item.title"
                      :description="item.arrt.deviceCode" />
        <template slot="action">
          <li>
            <span class="online-span" v-if="item.online=='true' || item.online=='1'">{{ $t('online') }}</span>
            <span class="offline-span" v-else >{{$t('offline')}}</span>
          </li>
          <li>
          <Button class="btn1" icon="md-mic" :disabled="!(item.online=='true' || item.online=='1')" :title="$t('audio_call')" type="info"  @click="btnClick('audioCall')"></Button>
          <Button class="btn1" icon="md-reverse-camera" :disabled="!(item.online=='true' || item.online=='1')" :title="$t('take_picture')" type="info"  @click="btnClick('takePicture')"></Button>
          <Button class="btn1" icon="ios-more" :disabled="!(item.online=='true' || item.online=='1')" :title="$t('send_message')" type="info"  @click="btnClick('issueMessage')"></Button>
          </li>

<!--          <li>
            <Icon type="ios-star-outline" /> 123
          </li>
          <li>
            <Icon type="ios-thumbs-up-outline" /> 234
          </li>
          <li>
            <Icon type="ios-chatbubbles-outline" /> 345
          </li>-->
        </template>



      </ListItem>
    </List>
  </div>
</template>
<script>
export default {
  name: 'DeviceSelectPopupForm',
  props:{
    devices:{
      type: Array,
      default: []
    }
  },
  watch:{
    devices(){
      console.log(">>>>>>>> DeviceSelectPopupForm.watch: devices=%o",this.devices);
    }
  },
  data(){
    return{

    }
  },
  methods:{
    btnClick(){
      ;
    }
  }
}

</script>
<style lang="less">
#selected-devices{
  width: 100%;
  height: 100%;
  .online-span{
    color: #00ff00;
  }
  .offline-span{
    color: #c80000;
  }
  .btn1 {
    margin-left: 5px;
    margin-bottom: 2px;
  }
}
</style>
